<!-- eslint-disable no-unused-vars -->
<template>
  <div class="d-flex flex-column flex-root">
    <div
      class="login login-1 d-flex flex-column flex-lg-row flex-column-fluid bg-white"
      :class="{
        'login-signin-on': this.state == 'signin',
        'login-forgot-on': this.state == 'forgot'
      }"
      id="kt_login"
    >
      <!--begin::Aside-->
      <div
        class="login-aside d-flex flex-column flex-row-auto"
        style="background-color: #F2C98A;"
      >
        <div class="d-flex flex-column-auto flex-column pt-lg-40 pt-15">
          <a href="#" class="text-center mb-10">
            <img src="media/logos/logo01.svg" class="max-h-70px" alt="" />
          </a>
          <h3
            class="font-weight-bolder text-center font-size-h4 font-size-h1-lg"
            style="color: #986923;"
          >
            JEHC低代码开源平台<br />
            V2.0.0版本
          </h3>
        </div>
        <div
          class="aside-img d-flex flex-row-fluid bgi-no-repeat bgi-position-y-bottom bgi-position-x-center"
          :style="{ backgroundImage: `url(${backgroundImage})` }"
        ></div>
      </div>
      <!--begin::Aside-->
      <!--begin::Content-->
      <div
        class="login-content flex-row-fluid d-flex flex-column justify-content-center position-relative overflow-hidden p-7 mx-auto"
      >
        <div class="d-flex flex-column-fluid flex-center">
          <!--begin::登录-->
          <div class="login-form login-signin">
            <form
              class="form"
              novalidate="novalidate"               
              id="kt_login_signin_form"       
              @submit.stop.prevent="login()"         
            >
              <div class="pb-13 pt-lg-0 pt-5">
                <h3 class="font-weight-bolder text-dark font-size-h4 font-size-h1-lg" >
                  JHEC 2.0开源平台...
                </h3>
              </div>
              <div class="form-group">
                <label class="font-size-h6 font-weight-bolder text-dark">账号</label>
                <div id="example-input-group-1" label="" label-for="example-input-1">
                  <input class="form-control form-control-solid h-auto py-7 px-6 rounded-lg" 
                          type="text" 
                          name="account" 
                          ref="account"  
                          v-model="form.account" />
                </div>
              </div>
              <div class="form-group">
                <div class="d-flex justify-content-between mt-n5">
                  <label class="font-size-h6 font-weight-bolder text-dark pt-5">密码</label>
                  <a class="text-primary font-size-h6 font-weight-bolder text-hover-primary pt-5"
                    id="kt_login_forgot"
                    @click="showForm('forgot')"
                    >忘记密码 ?</a>
                </div>
                <div id="example-input-group-2" label="" label-for="example-input-2" >
                  <input
                    class="form-control form-control-solid h-auto py-7 px-6 rounded-lg"
                    type="password"
                    name="password"
                    ref="password"
                    v-model="form.password"                   
                    autocomplete="off"/>
                </div>
              </div>  
              <div class="form-group">
                <label class="font-size-h6 font-weight-bolder text-dark">验证码</label>
                <div class="row">
                  <div class="col-sm-6">
                    <input
                        class="form-control form-control-solid h-auto py-7 px-6 rounded-lg"
                        type="text"
                        v-model="form.validateCode"
                        name="validateCode"
                        ref="validateCode"
                      />
                  </div>
                  <div class="col-sm-2">                      
                    <img :src="form.validImage" alt="" class="h-30px"> 
                    <b-link href="javascript:void(0)" @click="initValidate">换一张</b-link>
                  </div>     
                </div>
              </div>
              <div class="pb-lg-0 pb-5">
                <button fab x-large dark class="btn btn-primary btn-lg btn-block" ref="kt_login_signin_submit">登录</button>
              </div>
            </form>
            
          </div>
          <!--end::登录-->

          <!--begin::忘记密码-->
          <div class="login-form login-forgot">
            <!--begin::Form-->
            <form
              class="form"
              novalidate="novalidate"
              id="kt_login_forgot_form"
              ref="kt_login_forgot_form"
            >
              <div class="pb-13 pt-lg-0 pt-5">
                <h3 class="font-weight-bolder text-dark font-size-h4 font-size-h1-lg" >
                  忘记密码 ?
                </h3>
                <p class="text-muted font-weight-bold font-size-h4">
                  输入您的电子邮件以重置密码
                </p>
              </div>
              <div class="form-group">
                <input
                  class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
                  type="email"
                  placeholder="Email"
                  name="email"
                  autocomplete="off"
                />
              </div>
              <div class="form-group d-flex flex-wrap pb-lg-0">
                <button
                  type="button"
                  id="kt_login_forgot_submit"
                  class="btn btn-primary font-weight-bolder font-size-h6 px-8 py-4 my-3 mr-4"
                >
                  提交
                </button>
                <button
                  type="button"
                  id="kt_login_forgot_cancel"
                  class="btn btn-light-primary font-weight-bolder font-size-h6 px-8 py-4 my-3"
                  @click="showForm('signin')"
                >
                  取消
                </button>
              </div>
            </form>
          </div>
          <!--end::忘记密码-->
        </div>
        <!--begin::底部公共模块-->
        <div
          class="d-flex justify-content-lg-start justify-content-center align-items-end py-7 py-lg-0"
        >
          <a href="#" class="text-primary font-weight-bolder font-size-h5"
            >关于我们</a
          >
          <a href="#" class="text-primary ml-10 font-weight-bolder font-size-h5"
            >ICP备案</a
          >
          <a href="#" class="text-primary ml-10 font-weight-bolder font-size-h5"
            >公司信息</a
          >
        </div>
        <!--end::底部公共模块-->
      </div>
      <!--end::Content-->
    </div>
  </div>
</template>

<!-- 加载登录自定义页面样式 -->
<style lang="scss">
@import "@/assets/sass/pages/login/login-1.scss";
</style>
<script>
import KTUtil from "@/assets/js/components/util";
import apiUtil from "@/core/util/apiUtil.js";  
import { handleAlert,setLocalItem,getLocalItem} from "@/core/util/jehcUtil.js";
import Router from "@/router.js";
export default {
  name: "login",
  data() {
    return {      
      state: "signin",
      form: {
        account: "",
        password: "",
        validateCode: "",
        validImage:""
      }
    };
  },
  computed: {
    backgroundImage() {
      return (
        process.env.BASE_URL + "media/svg/illustrations/login-visual-1.svg"
      );
    }
  },
  mounted() {
      this.initValidate();//初始化加载验证码
  },    
  methods: {
    showForm(form) {
      this.state = form;
      var form_name = "kt_login_" + form + "_form";
      KTUtil.animateClass(
        KTUtil.getById(form_name),
        "animate__animated animate__backInUp"
      );
    },
    initValidate(){
      this.initValidateCode().then(data=>{//验证码
          this.form.validImage =String(data)
        })
    },
    initValidateCode() {
      let validImage  = ''
      return new Promise((resolve)=>{          
        if(null != getLocalItem("JEHC-SESSION-ID") && 'null' != getLocalItem("JEHC-SESSION-ID") && '' != getLocalItem("JEHC-SESSION-ID")){
          console.log(getLocalItem("JEHC-SESSION-ID"),111111);
          validImage = process.env.VUE_APP_OAUTH_API+ "/client/verify?date="+new Date().getTime()+"&sessionId="+getLocalItem("JEHC-SESSION-ID");
          resolve(validImage)
        }else{          
          apiUtil.query(process.env.VUE_APP_OAUTH_API+"/JSessionId")
          .then(({ data }) => {             
            setLocalItem("JEHC-SESSION-ID", data.data);
            validImage = process.env.VUE_APP_OAUTH_API+"/client/verify?date="+new Date().getTime()+"&sessionId="+data.data;
            resolve(validImage)
          })
        }
      })
    },
    login() {     
      let account = this.form.account;
      let password = this.form.password;
      let validateCode = this.form.validateCode;
      if('' === account){
        handleAlert("请输入账号", "error", 3);
        this.$refs.account.focus()
        return false;
      }
      if('' === password){
        handleAlert("请输入密码", "error", 3);
        this.$refs.password.focus()
        return false;
      }
      if('' === validateCode){
        handleAlert("请输入验证码", "error", 3);
        this.$refs.validateCode.focus()
        return false;
      }
      // 设置提交按钮提交时样式
      const submitButton = this.$refs["kt_login_signin_submit"];
      submitButton.classList.add("spinner", "spinner-light", "spinner-right");            
      let param = { account: account, password: password, validateCode: validateCode };//组装参数
      apiUtil.post(process.env.VUE_APP_OAUTH_API+"/login", param).then(({ data }) => {// 发送登录请求
        if(data.success == false) {
          handleAlert(data.message, "error", 3);
          //移除登录按钮样式
          submitButton.classList.remove("spinner","spinner-light","spinner-right");              
          //刷新验证码
          this.initValidate();
        }else{
          setLocalItem("token", data.data);
          // this.$router.push({ path: "/dashboard" })
          const JEHC_ROUTER_NEED_LOAD = "JEHC_ROUTER_NEED_LOAD"; 
          setLocalItem(JEHC_ROUTER_NEED_LOAD, 1);
          this.$router.push("/dashboard" );
        }          
      }).catch(({ response }) => {
        handleAlert("登录失败", "error", 3);
        //移除登录按钮样式
        submitButton.classList.remove(
          "spinner",
          "spinner-light",
          "spinner-right"
        );    
        //刷新验证码
        this.initValidate();
      });
      return false;
    }
  }
};
</script>
